<template>
  <!-- <el-form>
    <formItem :component-name="componentName" :config="config"/>
  </el-form> -->
  <el-form-item :label="config.label" :label-width="config.labelW" :rules="config.rules" :class="config.formItemClass" :prop="config.name" :style="config.formItemStyle">
    <components :is="componentName" :config="config" :data="value" @updateForm="updateFormFn"/>
  </el-form-item>
  <!-- <components :is="componentName" :config="config" :data="value" @updateForm="updateFormFn"/> -->
</template>

<script>
export default {
  name: 'FormElements',
  components: {
    // formItem: require('./formItem.vue').default,
    formInput: require('./components/input.vue').default,
    formTestArea: require('./components/testArea.vue').default,
    formSelect: require('./components/select.vue').default,
    formSelectTree: require('./components/selectTree.vue').default,
    formCheckbox: require('./components/checkbox.vue').default,
    formDate: require('./components/date.vue').default,
    formSwitch: require('./components/switch.vue').default
  },
  props: {
    colIndex: {
      type: [Number, String],
      default: 0
    },
    value: {
      type: [Number, String],
      default: ''
    },
    tableData: {
      type: Object,
      default () {
        return {}
      }
    },
    rowData: {
      type: [Object, Array],
      default () {
        return {}
      }
    },
    colData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  /**
   * 表单元素模板对应值：
      inputType ：
      -1: 隐藏
      0： 只读（文本模式）
      1： 输入框
        inputType=1 的时候 再去扩展 colType= INT,CHAR,DATE,TIME,DATETIME,NUMBER,MONTH,YAER,TEXT
      2： 下拉列表
      3： 从服务端加载下拉列表
      4： 多选列表(下位多选)
      41： 是否的复选框(checkbox)，// TODO1: inputType=41这里前端改成了switch组件，后端需要调整下吗？
      5： 单选列表
      6： 五个星的方式
      7： 弹出选人员
      8： 弹出选部门
      9：可以输入，可以编辑的表单输入框
   */
  data () {
    return {
      config: {},
      // value: '',
      componentName: '',
      formEleIndex: {
        '1': 'formInput',
        '1-text': 'formTestArea',
        '1-date': 'formDate',
        '1-datetime': 'formDate',
        '2': 'formSelect',
        '31': 'formSelectTree',
        '4': 'formCheckbox',
        '6': 'formSwitch'
      }
    }
  },
  computed: {
  },
  watch: {
    colData: {
      handler(obj) {
        const formField = obj.FormField || {}
        const inputType = '' + formField.inputType || '1'
        let typeStr = inputType
        // debugger
        if (inputType === '1') { // input 类型
          const inputArr = ['int', 'char', 'nvarchar', 'number']
          if (inputArr.indexOf(formField.colType) > -1) {
            typeStr = '1'
          } else {
            typeStr = inputType + '-' + formField.colType
          }
        }
        this.componentName = this.formEleIndex[typeStr]
        this.rowData
        // this.value = this.rowData[obj.colName]
        // console.log('colData: ', obj.colName, this.value)
        // this.config = this.$common.deepCloneObj(obj.config)
        this.config = {
          label: obj.label,
          name: formField.colName, // 字段名
          placeholder: '请输入' + obj.label, // 为空时候显示
          clearable: true, // 右侧是否显示清空按钮
          disabled: false, // 是否不允许编辑
          formItemClass: formField.formItemClass,
          formItemStyle: formField.formItemStyle,
          childClass: formField.childClass,
          childStyle: formField.childStyle,
          array: formField.dropList || [],
          rules: [ // 校验规则
            // { required: true, message: '工号不能为空', trigger: 'blur' }
          ]
        }
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    // debugger
  },
  methods: {
    validate(item) {
      const keyName = item.colName
      if (item.colNull === 0) { // 0.必填 1.选填
        // 特殊校验
        if (item.inputType === 1 && item.colType === 'date') {
          // 日期组件的校验总是存在滞后，这里特殊处理
          this.formRules1[keyName] = [
            { required: true, message: '请输入' + item.label, trigger: 'blur', validator: validateDateFn.bind(this, { that: this }) }
          ]
        } else {
          this.formRules1[keyName] = [
            { required: true, message: '请输入' + item.label, trigger: 'blur' }
          ]
        }
      }
    },
    /**
     * 子组件传递更新Form对象属性
     * @param key
     * @param val
     */
    updateFormFn (key, val) {
      // debugger
      this.$emit('update:value', val)
      this.$emit('updateForm', ...arguments) // 有的表单需要特殊更新更新
    }
  }
}
</script>
